import React, { useState } from 'react'
import styles from '../css/Home.module.css'
import { LoopOutline } from 'antd-mobile-icons'
import { Input, CalendarPicker } from 'antd-mobile'
import { upFand } from '../store/ticket/tickte'
import { Button } from 'antd-mobile'
import { useSelector, useDispatch } from 'react-redux'
import { upFandT } from '../store/ticket/tickte'
import { useNavigate, useSearchParams } from 'react-router-dom'
import useAunt from '../hooks/useAunt'
import { updATE } from '../store/ticket/tickte'
function Home() {
  const [visible1, setVisible1] = useState(false)
  let { isLogin } = useAunt()
  let nav = useNavigate()
  const date = useSelector((state) => state.counter.date)
  const from = useSelector((state) => state.counter.from)
  const to = useSelector((state) => state.counter.to)
  const isSpeed = useSelector((state) => state.counter.isSpeed)
  const dispatch = useDispatch()
  let [sp] = useSearchParams()
  const gotoList = () => {
    nav(`/list?start=${from}&end=${to}&date=${date}&isSpeed=${isSpeed}`)
  }
  return (
    <div className={styles.body}>
      <div className={styles.top}></div>
      <div className={styles.box}>
        <div className={styles.boxx}>
          <div> <Input onChange={(k) => { dispatch(upFand(k)) }} placeholder='出发城市' clearable /></div>
          <div><LoopOutline /></div>
          <div> <Input onChange={(k) => { dispatch(upFandT(k)) }} placeholder='到达城市' clearable /></div>
        </div>
        <div className={styles.boxx} onClick={()=>{setVisible1(true)}}>{date}</div>
        <CalendarPicker
          visible={visible1}
          selectionMode='single'
          onChange={(val)=>{
            dispatch(updATE(val.toString()))
          }}
          onClose={() => setVisible1(false)}
          onMaskClick={() => setVisible1(false)}
        />
        <div className={styles.boxx}>
          <Button onClick={() => gotoList()}
            block style={{ backgroundColor: '#3C3C3C', color: '#fff', borderRadius: '15px' }} size='large'>
            查询
          </Button>
        </div>
        <div className={styles.boxx} style={{ fontSize: '16px', }}>
          <div style={{ border: '1px solid #000', borderRadius: '15px' }}>合肥-南京</div>
          <div>清空</div>
        </div>
      </div>
    </div>
  )
}

export default Home
